<template>
  <div class="box-show">
    <div class="z gonggao">
      <el-page-header
        style="color: #999999"
        @back="$router.back(-1)"
        content="新增员工"
      >
      </el-page-header>
      <div style="height: 20px"></div>
    </div>
    <div class="shuju">
      <el-row>
        <el-col :span="8">
          <el-form
            ref="form"
            :rules="rules"
            :model="form"
            label-width="80px"
            size="mini"
          >
            <el-form-item
              label="员工姓名"
              prop="name"
              :rules="[{ required: true, message: '仓库名称不能为空' }]"
            >
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item
              label="分组"
              prop="group_id"
              style="text-align: left"
              :rules="[{ required: true, message: '请选择一个分组' }]"
            >
              <el-select
                v-model="form.group_id"
                placeholder="请选择分组"
                @change="storehouse_id()"
              >
                <template v-for="(item, index) in groupList">
                  <el-option
                    :label="item.name"
                    :key="index"
                    :value="item.id"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item
              label="仓库"
              prop="storehouse_id"
              style="text-align: left"
              v-if="form.group_id != 1 && form.group_id < 5"
              :rules="[
                { required: true, message: '请选择一个仓库', trigger: 'change' }
              ]"
            >
              <el-select
                v-model="form.storehouse_id"
                placeholder="请选择一个仓库"
              >
                <template v-for="(item, index) in storehouseList">
                  <el-option
                    :label="item.name"
                    :key="index"
                    :value="item.id"
                    v-if="item.type == 1"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item
              label="门店"
              prop="storehouse_id"
              style="text-align: left"
              v-if="form.group_id != 1 && form.group_id >= 5"
              :rules="[
                { required: true, message: '请选择一个门店', trigger: 'change' }
              ]"
            >
              <el-select
                v-model="form.storehouse_id"
                placeholder="请选择一个门店"
              >
                <template v-for="(item, index) in storehouseList">
                  <el-option
                    :label="item.name"
                    :key="index"
                    :value="item.id"
                    v-if="item.type == 2"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>

            <el-form-item style="text-align: left">
              <el-button type="primary" @click="onSubmit('form')"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  storehouse_getAllByUniacid,
  group_getAll,
  users_save
} from "@/utils/do";
export default {
  name: "add",
  props: {},
  data() {
    var phone = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号码格式不正确"));
      } else {
        callback();
      }
    };
    return {
      form: {
        name: "",
        phone: "",
        group_id: "", // 分组的ID
        storehouse_id: "" // 仓库的唯一ID
      },
      groupList: [],
      storehouseList: [],
      rules: {
        phone: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: "blur"
          },
          { validator: phone, trigger: "blur" }
        ]
      }
    };
  },
  components: {
    // 第三方组件实例化
  },
  computed: {},
  methods: {
    storehouse_id() {
      this.form.storehouse_id = "";
      console.log("现在的仓库ID=", this.form.storehouse_id);
    },
    // 方法
    onSubmit(form) {
      this.$store.commit("setIsLoading", true);
      let _this = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          console.log("提交参数", _this.form);
          users_save(_this.form, res => {
            _this.$store.commit("setIsLoading", false);
            console.log(res);
            if (res.code != 0) {
              _this.$message.error(res.msg);
              return;
            }
            _this.$alert("新增员工成功", "提醒", {
              confirmButtonText: "确定",
              callback: action => {
                console.log("点击了=", action);
                _this.$router.push("/User/User/List");
              }
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 获取分组
     */
    group_getAll() {
      let _this = this;
      group_getAll(res => {
        _this.groupList = res.date;
      });
    },
    /**
     * 获取仓库
     */
    storehouse_getAllByUniacid() {
      let _this = this;
      storehouse_getAllByUniacid(res => {
        if (res.code == 0) {
          _this.storehouseList = res.date;
        }
      });
    }
  },
  mounted() {
    this.$store.commit("setIsLoading", true);
    this.group_getAll();
    this.storehouse_getAllByUniacid();
    this.$store.commit("setIsLoading", false);
  }
};
</script>

<style scoped>
@import "~@/assets/scss/index.css";
</style>
